<template>
  <div class="exercise-content">
    <div class="exercise-body">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/?type=1' }"
          >科目一</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="backUrl">{{
          examType == 1 ? "章节练习" : "专题练习"
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>试题练习</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="topic-body">
        <div class="topic-title">
          <div class="topic-type">单选</div>
          <div class="topic-text">
            这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是
            <span class="topic-btn">读题</span>
          </div>
        </div>
        <div class="option-list">
          <div class="option-item">
            <img src="../../assets/椭圆 4241 拷贝.png" alt="" />
            <div>A.这是答案a选项的内容1</div>
          </div>
          <div class="option-item">
            <img src="../../assets/椭圆 4241 拷贝.png" alt="" />
            <div>A.这是答案a选项的内容1</div>
          </div>
          <div class="option-item">
            <img src="../../assets/椭圆 4241 拷贝.png" alt="" />
            <div>A.这是答案a选项的内容1</div>
          </div>
          <div class="option-item">
            <img src="../../assets/椭圆 4241 拷贝.png" alt="" />
            <div>A.这是答案a选项的内容1</div>
          </div>
        </div>
        <div class="topic-tips">
          <div>
            <span>正确答案</span>
            <span class="true-answer">A</span>
          </div>
          <div>
            <span>您的选择</span>
            <span class="wrong-answer">A</span>
          </div>
        </div>
      </div>
      <div class="topic-analysis">
        <div class="analysis-title">技巧讲解</div>
        <div class="analysis-body" v-if="!listShow">
          <div class="analysis-subTitle">
            <img src="../../assets/tmjx.png" alt="" />
            <div>题目解析</div>
          </div>
          <div class="analysis-text">
            题目解析包含法律条文，题目解析包含法律条文题目解析包含法律条文题目解析包含法，律条文题目解析包含法律条文题目解析包含法律条文题目解析包含法律条。
          </div>
        </div>
      </div>
      <div class="funcation-box">
        <div class="fun-left">
          <div class="change-btn">上一题</div>
          <div class="change-btn">下一题</div>
          <div class="collect-topic">
            <img src="../../assets/sc.png" alt="" />
            <div>收藏</div>
          </div>
        </div>
        <div class="fun-right">
          <div class="true-wrong">
            <img src="../../assets/组 16.png" alt="" />
            <div>27</div>
          </div>
          <div class="true-wrong">
            <img src="../../assets/组 16(1).png" alt="" />
            <div>6</div>
          </div>
          <div class="topic-fun" @click="listShow = !listShow">
            <img src="../../assets/1.png" alt="" />
            <div>30/2116</div>
          </div>
        </div>
      </div>
      <div class="topic-list" v-if="listShow">
        <div class="scroll-box">
          <div class="topic-item" v-for="(item, index) in 100" :key="index">{{ index + 1 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExamExercise",
  data() {
    return {
      examType: 0,
      backUrl: {
        path: "",
      },
      listShow: false,
    };
  },
  mounted() {
    this.handleExamType();
  },
  methods: {
    // 处理练习类型
    handleExamType() {
      this.examType = this.$route.query.type;
      this.examType == 1
        ? (this.backUrl.path = "/ChapterExercise")
        : (this.backUrl.path = "/SpecialExercises");
    },
  },
};
</script>

<style lang="scss">
.exercise-body {
  font-size: 0.9vw;
  padding: 1.5% 12.5%;
  padding-bottom: 0;
  background-color: #fff;
  min-height: 86.2vh;
  height: auto;

  .topic-body {
    margin-top: 2vh;

    .topic-title {
      display: flex;
      align-items: center;
      position: relative;

      .topic-type {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 0.8vw;
        padding: 0.2vh 0.5vw;
        color: #fff;
        background: linear-gradient(180deg, #66ccad, #2ac092);
        border-radius: 6px;
      }

      .topic-text {
        margin: 0 1vw 0 3vw;
        width: max-content;
        .topic-btn {
          color: #2ac092;
          background: #d7f5ec;
          border: 1px solid #8ae6ca;
          border-radius: 6px;
          padding: 0.2vh 0.5vw;
          font-size: 0.7vw;
          cursor: pointer;
        }
      }
    }

    .option-list {
      margin-top: 2vh;

      .option-item {
        display: flex;
        align-items: center;
        margin-top: 2vh;
        cursor: pointer;

        > img {
          width: 1vw;
          height: 2vh;
          margin-right: 0.5vw;
        }
      }
    }

    .topic-tips {
      margin-top: 2vh;
      padding: 1vh 1.5vw;
      display: flex;
      border-radius: 10px;
      background-color: #f5f5f5;

      > div > span {
        margin-right: 1vh;
      }

      .true-answer {
        color: #2ac092;
      }

      .wrong-answer {
        color: #ff6d6a;
      }
    }
  }
}

.topic-analysis {
  margin-top: 5vh;
  border-bottom: 1px solid #e6e6e6;

  .analysis-title {
    text-align: center;
    font-size: 1.1vw;
    font-weight: bold;
  }
  .analysis-body {
    margin-top: 1vh;
    padding-bottom: 20vh;

    .analysis-subTitle {
      display: flex;
      align-items: center;

      > img {
        width: 1vw;
        height: 1vw;
        margin-right: 0.5vw;
      }
    }

    .analysis-text {
      margin-top: 2vh;
      padding: 2vh 2vw;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
    }
  }
}

.funcation-box {
  display: flex;
  justify-content: space-between;
  padding: 1.5vh 0;

  .fun-left,
  .fun-right {
    display: flex;
    align-content: center;
  }

  .change-btn {
    cursor: pointer;
    padding: 0.5vh 1vw;
    height: max-content;
    border: 1px solid #e6e6e6;
    border-radius: 25px;
    margin-right: 0.5vw;
  }

  .collect-topic {
    cursor: pointer;
    display: flex;
    height: max-content;
    align-items: center;
    background: linear-gradient(180deg, #ffc37f, #ffa23b);
    border-radius: 25px;
    padding: 0.5vh 1vw;
    color: #fff;
  }
  .true-wrong {
    display: flex;
    align-items: center;
    margin-right: 5vw;
  }

  .topic-fun {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  img {
    width: 1vw;
    height: 2vh;
    margin-right: 0.3vw;
  }
}

.topic-list {
  height: 30vh;
  .scroll-box {
    padding-right: .6vw;
    overflow-y: auto;
    height: 30vh;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;

    .topic-item{
      margin: 0 0 1.5vh .9vw;
      cursor: pointer;
      text-align: center;
      width: 2%;
      padding: 1.4vh .6vw;
      border-radius: 50%;
      border: 1px solid;
    }
  }
}
</style>